<template>
  <div>
    <div class="container">

      <header>
        <van-nav-bar title="买家留言" left-text="返回" left-arrow @click-left="onClickLeft"/>
      </header>
      
      <main class="content">
        <!-- 留言 -->

       <textarea v-model="message" maxlength="120">

      </textarea>
       <span class="messagenumber"> {{0 + message.length }}/120 </span>
      
       <van-button type="primary" size="large" round
       @click="returnsub() "> 确定</van-button>
      
      </main>
    </div>
  </div>
</template>

<script>
  export default {
  data() {
      return {
        message: '',
      }
  },
  methods: {
    returnsub() {
      this.$router.push('/submit')
    }
    },
    onClickLeft(){
      this.$router.go(-1)
    }
  }
</script>

<style  scoped>
.van-button--large{
  width: 92%;
  margin-top: 20px;
}
textarea {
  width: 340px;
  height: 200px;
  border:0;
  position: relative;
  margin-top: 30px;

}
.messagenumber{
  position: absolute;
  top: 248px;
  right: 30px;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  flex: none; 
  background: white;
}

.content {
  flex: 1;
  overflow-y: auto;
  background: rgb(237, 235, 235);
}

footer {
  flex: none;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}
</style>